<template>
    <div class="app-container home">
        <van-nav-bar title="首页"></van-nav-bar>

        <!-- <div class="notice-outside">
          <van-notice-bar left-icon="volume-o" :scrollable="false">
            <van-swipe vertical class="notice-swipe"
              :autoplay="3000" :touchable="false" :show-indicators="false" >
              <van-swipe-item>提示</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </div> -->
        <br />

        <van-pull-refresh v-model="listLoadState.loading" @refresh="onRefresh">
            <van-tabs class="app-tabs" @click-tab="onSearch">
                <div style="background-color: #ffffff;padding-top: 10px;">
                    <van-space>
                        <van-button :class="activePeriodClass(1)" round type="default"
                            @click="onPeriod(1)">5&nbsp;分钟</van-button>
                        <van-button :class="activePeriodClass(2)" round type="default"
                            @click="onPeriod(2)">15&nbsp;分钟</van-button>
                        <van-button :class="activePeriodClass(3)" round type="default"
                            @click="onPeriod(3)">30&nbsp;分钟</van-button>
                        <van-button :class="activePeriodClass(4)" round type="default"
                            @click="onPeriod(4)">1&nbsp;小时</van-button>
                    </van-space>
                    <van-space>
                        <van-button :class="activePeriodClass(7)" round type="default"
                            @click="onPeriod(7)">2&nbsp;小时</van-button>
                        <van-button :class="activePeriodClass(5)" round type="default"
                            @click="onPeriod(5)">4&nbsp;小时</van-button>
                        <van-button :class="activePeriodClass(8)" round type="default"
                            @click="onPeriod(8)">6&nbsp;小时</van-button>
                        <van-button :class="activePeriodClass(9)" round type="default"
                            @click="onPeriod(9)">12&nbsp;小时</van-button>
                        <van-button :class="activePeriodClass(6)" round type="default"
                            @click="onPeriod(6)">日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;线</van-button>
                    </van-space>
                </div>
                <van-list v-model:loading="listLoadState.loadingMore" :finished="listLoadState.finished"
                    finished-text="没有更多数据" @load="onLoadMore">
                    <van-tab title="BTC/USDT">
                        <van-cell-group>
                            <van-cell v-for="item in list" :key="item.id">
                                <van-card :title="title(item)">
                                    <template #tags>
                                        <p>{{ text(item) }}</p>
                                        <p>{{ item.createTime }}</p>
                                    </template>
                                </van-card>
                            </van-cell>
                        </van-cell-group>
                    </van-tab>
                    <van-tab title="ETH/USDT">
                        <van-cell-group>
                            <van-cell v-for="item in list" :key="item.id">
                                <van-card :title="title(item)">
                                    <template #tags>
                                        <p>{{ text(item) }}</p>
                                        <p>{{ item.createTime }}</p>
                                    </template>
                                </van-card>
                            </van-cell>
                        </van-cell-group>
                    </van-tab>
                    <van-tab title="LTC/USDT">
                        <van-cell-group>
                            <van-cell v-for="item in list" :key="item.id">
                                <van-card :title="title(item)">
                                    <template #tags>
                                        <p>{{ text(item) }}</p>
                                        <p>{{ item.createTime }}</p>
                                    </template>
                                </van-card>
                            </van-cell>
                        </van-cell-group>
                    </van-tab>
                </van-list>
            </van-tabs>
        </van-pull-refresh>
    </div>
</template>
  
<script>
import { utilsMixin } from '@/mixin/utils'
import { query } from '@/api/alertLog'
import { getWxAppInfo } from '@/api/home'
import { mapState, mapActions } from 'pinia'
// import { showToast } from 'vant'

import Cookies from 'js-cookie'
import { showConfirmDialog } from 'vant'

import { useUserStore } from '@/store/user'

export default {
    name: 'Home',
    mixins: [utilsMixin],
    data() {
        return {
            list: [],
            defaultPeriod: 1,
            listQuery: { page: 1, rows: 10, token: 'BTC/USDT', period: 1 },
            listLoadState: {
                loading: false,
                loadingMore: false,
                finished: false,
            },
        }
    },
    created() {
        this.fetch()
        this.$nextTick(() => {
            if (!Cookies.get('aggrement')) {
                showConfirmDialog({
                    title: '免责声明',
                    message: '本平台内容与数据仅供参考，不构成投资建议。据此操作，风险自担。订阅服务是为用户提供的一项数据增值服务，属于虚拟商品，一经订阅不支持退订。',
                    cancelButtonText: '不同意',
                    confirmButtonText: '同意'
                })
                    .then(() => {
                        Cookies.set('aggrement', '1')
                    })
                    .catch(() => {
                        this.fedLogOut()
                        this.$router.replace({ path: '/login' })
                    });
            }
        })
    },
    methods: {
        ...mapActions(useUserStore, ['fedLogOut']),
        fetch() {
            this.loading = true
            query(this.listQuery).then(response => {
                if (response.success && response.data != null) {
                    const data = response.data
                    this.list = this.list.concat(data.records)
                    this.clearLoading(data.records.length < data.size)
                }
            }).catch(() => {
                this.clearLoading()
            })
            if (!this.wxOpenId) {
                getWxAppInfo().then(response => {
                    if (response.success && response.data != null) {
                        const data = response.data
                        const appid = data.appId
                        const host = location.href.split('#')[0] + 'wx/redirect/' + appid
                        const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(host) + '&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
                        location.href = url
                    }
                })
            }
        },
        text(row) {
            return row.title
        },
        title(row) {
            var period = ""
            if (row.period === 1) {
                period = "5分钟"
            } else if (row.period === 2) {
                period = "15分钟"
            } else if (row.period === 3) {
                period = "30分钟"
            } else if (row.period === 4) {
                period = "1小时"
            } else if (row.period === 5) {
                period = "4小时"
            } else if (row.period === 6) {
                period = "日线"
            }
            return row.token + ' - ' + period
        },
        onPeriod(period) {
            this.defaultPeriod = period
            this.listQuery.period = period
            this.onRefresh()
        },
        // 查询
        onSearch(val) {
            this.listQuery.token = val.title
            this.onRefresh()
        },
        activePeriodClass(period) {
            return 'period-button ' + (this.defaultPeriod == period ? 'activite-period' : '')
        },
        onLoadMore() {
            this.listQuery.page += 1
            this.listLoadState.loadingMore = true
            this.fetch()
        },
        onRefresh() {
            if (!this.listLoadState.loading) {
                this.listLoadState.loading = true
            }
            this.list = []
            this.listQuery.page = 1
            this.fetch()
        },
        clearLoading(finished) {
            this.listLoadState.loading = false
            this.listLoadState.loadingMore = false
            this.listLoadState.finished = finished
        },
    },
    computed: {
        ...mapState(useUserStore, ['wxOpenId'])
    },
}
</script>
<style></style>